<template>
    <div class="box">
        <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
        <div style="background-color: #545a5b;width: 100%;height: 2px;margin-top: 2px;"></div>
        <div>
            <div class="kongzhi">
                <div class="car" style="">车辆 :</div>
                <div class="xila">
                    <el-dropdown @command="clickItem">
                        <el-button type="primary" class="xilabi">
                            {{ clientId }}<el-icon class="el-icon--right"></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu v-for="item in list">
                                <el-dropdown-item :command="item">{{ item
                                }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="buttons">
            <div class="play">
                <el-button type="success" class="plays" display>开始播放</el-button>
            </div>
            <div class="list">
                <el-button type="success" class="loads" @click="getCarlist">重新加载</el-button>
            </div>
        </div>
        <div style="background-color: #545a5b;width: 100%;height: 2px;clear: both;margin-bottom: 2px;"></div>
        <div style="background-color: #545a5b;width: 100%;height: 2px;clear: both;"></div>
    </div>

    <div class="box2">
        <router-link class="button1" active-class="active" to="/video">rtvs实时视频</router-link>
        <router-link class="button2" active-class="active" to="/back">rtvs回放视频</router-link>
        <router-link class="button3" active-class="active" to="/storage">flv实时视频</router-link>
    </div>
</template>

<script >
import api from "@/api/api";
export default {
    name: 'Customize_Head_control',
    props: {

    },
    data: function () {
        return {
            clientId: "",
            list: []
        }
    },
     emits: ['clientId'],
    mounted() {
        this.getCarlist();
    },
    methods: {
        getCarlist() {
            api.getCarsList().then(res => {
                this.list = res;
                this.clientId=res[0];
                console.log(res)
                this.$emit("clientId",this.clientId)
            }).catch(err => {
                console.log(err)
            })
        },
        clickItem(val) {
            this.clientId = val;
            this.$emit("clientId",this.clientId)
        }
    },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
:deep(.el-button){
border: #01b2c5;
color: white;
}
.loads{
    background-color: #01b2c5;
}
.plays{
    background-color: #01b2c5;
}
.car{
    /* color:green; */
    text-align: center;
    float: left;
    line-height: 60px;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.box {
    margin-top: 10px;
    margin-left: 1%;
    width: 22%;
    height: 75px;
    background-color: #111010;
}

.kongzhi {
    margin-left: 10px;
    line-height: 60px;
}

.xila {
    float: left;
    text-align: center;
    height: 60px;
}

.xilabi {
    line-height: 60px;
    margin-left: 10px;
    margin-top: 15px;
    width: 140px;
    background-color: #333736;
}

.el-button--primary {
    --el-button-border-color: #333736;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.buttons {
    margin-left: 10px;
    float: left;
    text-align: center;
    height: 60px;
}

.play {
    line-height: 60px;
    width: 100px;
    float: left;
}

.list {
    width: 100px;
    float: left;
    line-height: 60px;
}

.box2 {
    clear: both;
    float: right;
    width: 17%;
    height: 30px;
    margin-right: 2%;
    margin-top: -60px;
    background-color: #111010;
    text-align: center;
    
}

.button1 {
    line-height: 30px;
    float: left;
    color: aliceblue;
    text-align: center;
    width: 33.3%;

}

.button2 {
    line-height: 30px;
    float: left;
    color: aliceblue;
    text-align: center;
    width: 33.3%;

}

.Real_time_map {
    margin-top: 1.5%;
    margin-left: 1.5%;
    width: 97%;
    height: 97%;
}

.button3 {
    line-height: 30px;
    color: aliceblue;
    text-align: center;
    width: 33.3%;
    float: left;
}

.active {
  
    background-color: #01b2c5;
    pointer-events: none;
    opacity: 1;
}

a {
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}
</style>
